
function Xue (params) {
  this.el = document.querySelector(params.el) // 根元素
  this.data = params.data // 用户数据
  this.cache = []   //状态缓存
  this.parse()      //  解析v-text 和v-model属性
  this.render()     // 渲染页面
  this.doubleBuildding()  // 双向绑定
}

Xue.prototype = {
  constructor: Xue,
  //  解析dom， dom属性， 绑定属性
  parse: function () {
    var vTexts = this.makeArray(this.el.querySelectorAll('[v-text]'))
    var vModels = this.makeArray(this.el.querySelectorAll('[v-model]'))
    this.map(vModels, 'v-model')
    this.map(vTexts, 'v-text')
  },
  makeArray: function (likeArr) {
    return [].slice.call(likeArr, 0)
  },
  map: function (elems, attr) {
    if (!elems) return;
    elems.map(function (elem) {
      var item = {
        el: elem,
        attr: attr,
        prop: elem.getAttribute(attr)
      }
      this.cache.push(item)
    },this)
  },
  doubleBuildding: function () {
    document.onkeyup = function (ev) {
      var act = document.activeElement
      if (act && act.nodeName.toLowerCase() === 'input') {
        var actInfo = this.cache.find(function (item) {
          return item.el === act
        })
        this.data[actInfo.prop] = act.value
        this.render()
      }
    }.bind(this)
  },
  render: function () {
    this.cache.map(function (item) {
      var val = this.data[item.prop]
      if (item.attr === 'v-model') {
        item.el.value = val
      } else
        item.el.innerText = val
    },this)
  }

}